<template>
    <el-container style="width:100%;height:100%;padding:0;margin:0;position:absolute;top:0;left:0">
        <el-container>
        <el-header style="height:10%;color:yellow;background-color:darkred;text-align:left;line-height:350%;">
            <span style="margin:20px">
            第一行
            </span>
            <el-button @click="navWidth='201px'" circle style="position: absolute;right: 0px;margin:10px">菜</el-button>
        </el-header>
        <el-main style="height:70%;">
            <el-col :span='12' style="height:100%">
                <!-- 廖凯华的组件 -->
            </el-col>
            <!-- <el-col :span='1' style="height:100%"><el-divider direction="vertical" style="height:100%"></el-divider></el-col> -->
            <!-- <el-divider direction="vertical" style="height:100%"></el-divider> -->
            <el-col :span='12' style="height:100%"><iframe :src='rightPageUrl' width="100%" height="100%" frameborder="0" scrolling="auto"></iframe></el-col>
        </el-main>
        <!-- <el-divider></el-divider> -->
        <!-- <el-divider></el-divider> -->
        <el-footer style="height:20%;background-color:darkred">
        <!-- <el-row class='footer' style="height:20%;background-color:darkred"> -->
            <el-col :span='16' style="text-align:left">
                <el-button
                    style="background-color:orange;width:100px;height:40px;margin:10px 5px;color:white;"
                    v-for="option in btnList"
                    :label="option.label"
                    :key="option.label"
                    @click="switchpage(option)">
                    {{ option.name }}
                </el-button>
            </el-col>
            <el-col :span='4'><el-button @click="dialogVisible=true" class='linkbtn' style='background-color:grey;color:black;font-size:20px;font-weight:900'>知识库</el-button></el-col>
            <el-col :span='4'><el-button class='linkbtn' style='background-color:grey;color:black;font-size:20px;font-weight:900'>实验任务</el-button></el-col>
        <!-- </el-row> -->
        <!-- <el-divider></el-divider> -->
        </el-footer>
        </el-container>
        <el-aside :width="navWidth" @mouseleave.native="navWidth=0">
            <el-menu class="el-menu-vertical-demo" :collapse="false">
                <el-submenu index="1">
                    <template slot="title">
                    <span slot="title">导航一</span>
                    </template>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-3">选项3</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                    <span slot="title">导航2</span>
                    </template>
                    <el-menu-item index="2-1">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项4</el-menu-item>
                </el-submenu>
                <!-- <li style="flex:1;"></li>
                <el-menu-item>By: Askeladd</el-menu-item> -->
            </el-menu>
        </el-aside>
        <!-- <el-col :span='menuSpan'> -->
        
        <!-- </el-col> -->
        <el-dialog
            title="知识库"
            :visible.sync="dialogVisible"
            width="60%">
            <el-tabs v-model="activeName">
            <el-tab-pane label="基础知识" name="first">
                <el-collapse v-model="activeNames">
                    <el-collapse-item v-for="option in tipInfo" :title="option.title" :key='option.title' :name="option.title">
                        {{option.content}}
                    </el-collapse-item>
                    </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="安全工具" name="second">
                <el-collapse v-model="activeNames">
                    <el-collapse-item v-for="option in toolInfo" :title="option.title" :key='option.title' :name="option.title">
                        {{option.content}}
                    </el-collapse-item>
                    </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="思维导图" name="third">
                空
            </el-tab-pane>
            </el-tabs>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span> -->
        </el-dialog>
    </el-container>
</template>

<script>

export default {
  data() {
    return {
        backgroundDiv: {
            backgroundImage: 'url(' + require('~@/../../static/background.jpg') + ')'
        },
      
    //   leftPageUrl: '',
      rightPageUrl: '',
      showNav:false,
      dialogVisible:false,
      activeName:'first',
      activeNames: '',
      navWidth:0,
      // 静态文件中引入
      btnList:toolKeys,
      toolInfo: toolInfo,
      tipInfo: tipInfo
    }
  },
  created(){
    // this.handleInit()
  },
  methods: {
    //   handleInit(){
    //     var tool = toolInfo
    //     var tip = tipInfo
    //     this.btnList = toolKeys
    //     // console.log(this.btnList)
    //   },
      handleClose() {

      },
      switchpage(label){
        // console.log(label)
        // this.leftPageUrl = label['pathLeft']
        this.rightPageUrl = label['path']
        // console.log(this.pageUrl)
      },
      switchNav(){
          this.navWidth = this.navWidth?0:'201px'
        //   if(this.showNav) {
        //     this.showNav=false
        //     this.mainSpan = 24
        //     this.menuSpan = 0
        //   } else {
        //     this.showNav=true
        //     this.mainSpan = 20
        //     this.menuSpan = 4
        //   }
        // this.showNav=this.showNav==true?false:true
      }
  }
}

</script>
<style>
.header{
    height: 20%;
    width: 100%
}
.main{
    height: 60%;
    width: 100%
}
.footer{
    height: 20%;
    width: 100%
}
.el-divider--vertical {
    display: inline-block;
    width: 1px;
    height: 100%;
    margin: 0 0px;
    vertical-align: middle;
    position: relative;
}
.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 0 0;
}
.linkbtn{
    margin:20px;
    /* margin-top: 20px; */
    width:150px;
    height:70px;
    border-radius: 0px;
}
.container{
    height:100%;
    width:100%;
    position:absolute;
    margin: 0;
    top:0;
    left:0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    display: flex;
    flex-direction: column
}
/* .el-row{
    border-radius: 0px
} */
/* .el-col{
    border: 1px
} */
</style>